<template>
  <view class="page">
    <!-- 自定义日期 -->
    <customRange @update-between-time="handleBetweenTime" :sendTime="sendTime" :index="chooseIndex"></customRange>
    <scroll-view class="scroll" @refresherrefresh="refresher" refresher-enabled="true"
                 :refresher-background="bgColor" :refresher-triggered="triggered" :refresher-threshold="80"
                 @scrolltolower="finishPullUp" scroll-y :show-scrollbar="false">
      <!-- 销售人员 -->
      <view>
        <view class="sale_name">
          <view>{{ performance_person.salesman_name }}</view>
          <view>({{ performance_person.depart_name }})</view>
        </view>
        <view class="sale-fact-money" @click="showDetailPerformance('fact_performance')">
          <view class="field-name">实际业绩：</view>
          <view class="fact-money">{{ formatNumber(performance_person.fact_performance) }}</view>
          <view style="margin-left: 4rpx;">
            <uni-icons type="help-filled" size="16" :color="iconColor"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 业绩内容 -->
      <view>
        <view class="sale-content">
          <view style="display: flex;flex-direction: row;justify-content: space-between;">
            <view class="sale-content-item" @click="performanceOver(performance_person.objectives_rate)">
              <view class="content-fact-money">{{ formatNumber(performance_person.performance_objectives) }}
                /
                {{ formatNumber(performance_person.objectives_rate) }}%
              </view>
              <view class="content-field-name">目标 / 完成率</view>
            </view>

            <view class="sale-content-item" @click="performanceRank(performance_person.performance_top)">
              <view style="position: absolute;top: 10rpx;right: 14rpx;">
                <uni-icons custom-prefix="iconfont" type="icon-jiangbei1" size="20"
                           color="#ff6f3f"></uni-icons>
              </view>
              <view class="content-fact-money">{{ formatNumber(performance_person.performance_top) }}</view>
              <view class="content-field-name">业绩排名</view>
            </view>

            <view class="sale-content-item" @click="showDetailPerformance('all_room_count')">
              <view class="content-fact-money">{{ formatNumber(performance_person.all_room_count) }}</view>
              <view class="content-field-name">总订桌</view>
            </view>
          </view>
          <view
              style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 30rpx;">
            <view class="sale-content-item" @click="showDetailPerformance('total_money')">
              <view class="content-fact-money">{{ formatNumber(performance_person.total_money) }}</view>
              <view class="content-field-name">总消费</view>
            </view>
            <view class="sale-content-item" @click="showDetailPerformance('no_performance')">
              <view class="content-fact-money">{{ formatNumber(performance_person.no_performance) }}</view>
              <view class="content-field-name">非业绩</view>
            </view>
            <view class="sale-content-item" @click="showDetailPerformance('all_no_effective_count')">
              <view class="content-fact-money">{{ formatNumber(performance_person.all_no_effective_count) }}
              </view>
              <view class="content-field-name">无效订桌</view>
            </view>
          </view>
          <view
              style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 30rpx;">
            <view class="sale-content-item" @click="showDetailPerformance('charge_money')">
              <view class="content-fact-money">{{ formatNumber(performance_person.charge_money) }}</view>
              <view class="content-field-name">充值业绩</view>
            </view>
            <view class="sale-content-item" @click="showDetailPerformance('commission_money')">
              <view class="content-fact-money">{{ formatNumber(performance_person.commission_money) }}
              </view>
              <view class="content-field-name">商品提成</view>
            </view>
            <view class="sale-content-item" @click="showDetailPerformance('all_effective_count')">
              <view class="content-fact-money">{{ formatNumber(performance_person.all_effective_count) }}
              </view>
              <view class="content-field-name">有效订桌</view>
            </view>
          </view>
          <view
              style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 30rpx;">
            <view class="sale-content-item" @click="showDetailPerformance('total_fact_money')">
              <view class="content-fact-money">{{ formatNumber(performance_person.total_fact_money) }}
              </view>
              <view class="content-field-name">总实收</view>
            </view>
            <view class="sale-content-item">
              <view class="content-fact-money"
                    @click="showDetailPerformance('all_effective_performance_money')">
                {{ formatNumber(performance_person.all_effective_performance_money) }}
              </view>
              <view class="content-field-name">有效桌业绩</view>
            </view>
            <view class="sale-content-item"
                  @click="showDetailPerformance('all_effective_no_performance_money')">
              <view class="content-fact-money">
                {{ formatNumber(performance_person.all_effective_no_performance_money) }}
              </view>
              <view class="content-field-name">无效桌业绩</view>
            </view>
          </view>
          <view
              style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 30rpx;">
            <view class="sale-content-item" @click="showDetailPerformance('all_reach_count')">
              <view class="content-fact-money">{{ formatNumber(performance_person.all_reach_count) }}</view>
              <view class="content-field-name">达低消桌</view>
            </view>
            <view class="sale-content-item" @click="showDetailPerformance('all_no_reach_count')">
              <view class="content-fact-money">
                {{ formatNumber(performance_person.all_no_reach_count) }}
              </view>
              <view class="content-field-name">未达低消桌</view>
            </view>
            <view class="sale-content-item" @click="avgMoney(performance_person.room_avg_money)">
              <view class="content-fact-money">
                {{ formatNumber(performance_person.room_avg_money) }}
              </view>
              <view class="content-field-name">桌均消</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 按天业绩展示 -->
      <view v-if="perfomance_person_day_list.length>1">
        <view class="depart-content">
          <view style="display: flex;flex-direction: row;height: 100%;align-items: center;">
            <view class="depart-content-title">业绩按天统计</view>
          </view>
          <view style="display: flex;flex-direction: row;height: 100%;align-items: center;"
                @click="changeSearch">
            <view class="depart-content-field" style="margin-left: 20rpx;">
              <view class="depart-content-rule">{{ sort.name }}</view>
              <uni-icons :type="sort.icon" size="12" :color="iconColor"></uni-icons>
            </view>
          </view>
        </view>
        <view class="depart-title-content">
          <view class="depart-title-content-name">日期</view>
          <view class="depart-title-content-desk">订桌(桌/均)</view>
          <view class="depart-title-content-money">消费 / 完成率 / 充值</view>
        </view>
        <view class="performance-detail">
          <view class="performance-detail-content" v-for="(item,index) in perfomance_person_day_list"
                :key="index">
            <view class="performance-detail-content-name">
              {{ item.date }}
            </view>
            <view class="performance-detail-content-desk">
              {{ formatNumber(item.all_effective_count) }}/{{ formatNumber(item.room_avg_money) }}
            </view>
            <view class="performance-detail-content-money">
              <view>{{ formatNumber(item.fact_performance) }} /
                {{ formatNumber(item.objectives_rate) }}% /
                {{ formatNumber(item.charge_money) }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="load-bottom">
        <view v-if="loadingFlag == 1" class="load_in" :class="loadingFlag == 1 ? 'load_in_ani' : ''">
          <uni-icons type="spinner-cycle" size="30" color="#ff6f3f"></uni-icons>
        </view>
        <view v-show="loadingFlag == 2" class="load_over">数据已全部加载~</view>
      </view>


    </scroll-view>
    <!-- 明细内容 -->
    <view style="position: absolute;z-index: 101;max-height: 80vh;min-height: 50vh;">
      <uni-popup ref="popupPerformanceDetail" type="bottom" :background-color="bgColor">
        <scroll-view class="scroll-performance-detail" style="max-height: 79vh;min-height: 49vh;" scroll-y
                     @scrolltolower="finishPullUpDetail" :show-scrollbar="false">
          <view class="detail-title-performance">
            <view
                style="font-size: 28rpx;color: var(--white-text);text-align: center;font-weight: 600;">
              {{ queryTypeName }}
            </view>
            <view style="color: var(--grey-text);font-size: 28rpx;" @click="cancelDetail">关闭</view>
          </view>
          <view class="line-split" style="margin-top: 82rpx;"></view>
          <view style="padding: 0 30rpx;" v-if="queryTypeName === '业绩明细' && detailList.length>0">
            <view style="background-color: var(--area-color);border-radius: 16rpx;"
                  v-for="(item,index) in detailList" :key="index">
              <view class="performance-detail-content-detail">
                <view class="detail-title">
                  <view style="display: flex;flex-direction: row;">
                    <view class="detail-name font-28">{{ item.room_name }}</view>
                    <view class="detail-name font-24"
                          style="display: flex;flex-direction: row;margin-left: 16rpx;">
                      <view style="color: var(--grey-text);">实收：</view>
                      <view>{{ item.total_fact_money }}</view>
                    </view>
                  </view>
                  <view style="display: flex;flex-direction: row;">
                    <view class="detail-target">{{ item.book_time }}</view>
                    <!-- <uni-icons type="right" size="12" :color="iconColor"></uni-icons> -->
                  </view>
                </view>
                <view class="line-split"></view>
                <view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;">
                  <view class="detail-item">
                    <view class="label">总消费：</view>
                    <view class="value">{{ item.total_money }}</view>
                  </view>
                  <view class="detail-item" style="justify-content: center;">
                    <view class="label">非业绩：</view>
                    <view class="value">{{ item.no_performance }}</view>
                  </view>
                  <view class="detail-item align-end">
                    <view class="label">业绩：</view>
                    <view class="value">{{ item.fact_performance }}</view>
                  </view>
                </view>
                <view class="detail-body"
                      style="padding: 0 10rpx;height: auto;margin-top: 20rpx;margin-bottom: 20rpx;">
                  <view class="detail-item">
                    <view class="label" v-for="(pay,payIndex) in item.payment_list"
                          :key="payIndex">
                      ({{ pay.payment_name }}:{{ pay.money }})
                    </view>
                  </view>
                  <view class="detail-item align-end" @click="showGoodsDetail(item,index)">
                    <view class="label" style="color: var(--grey-text);">消费明细</view>
                    <view class="value" style="margin-left: 10rpx;">
                      <uni-icons
                          :type="item.show?'down':'right'" size="12"
                          :color="iconColor"></uni-icons>
                    </view>
                  </view>
                </view>
              </view>
              <view style="padding: 0 20rpx;margin-top: 0;padding-bottom: 14rpx;" v-if="item.show">
                <view class="depart-title-content" style="margin-top: 0;padding: 0;">
                  <view class="depart-title-content-name font-24" style="font-size: 24rpx;">商品/数量
                  </view>
                  <view class="depart-title-content-desk font-24"
                        style="justify-content: center;">总金额
                  </view>
                  <view class="depart-title-content-money font-24">业绩 / 提成</view>
                </view>
                <view class="performance-detail" style="padding: 0;">
                  <view class="performance-detail-content"
                        style="height: 50rpx;margin-top: 10rpx;padding: 0;"
                        v-for="(goods,goodsIndex) in item.specs_list">
                    <view class="performance-detail-content-name font-24">
                      {{ goods.specs_name }}/{{ goods.specs_number - goods.specs_number_bak }}{{ goods.specs_unit }}
                    </view>
                    <view class="performance-detail-content-desk font-24"
                          style="justify-content: center;">
                      {{ goods.total_money }}
                    </view>
                    <view class="performance-detail-content-money font-24">
                      <view>{{ goods.fact_performance }} / {{ goods.commission_money }}</view>
                    </view>
                  </view>
                </view>
              </view>

            </view>
          </view>

          <view style="padding: 0 30rpx;" v-if="queryTypeName === '订桌明细' && detailList.length>0">
            <view style="background-color: var(--area-color);border-radius: 16rpx;"
                  v-for="(item,index) in detailList" :key="index">
              <view class="performance-detail-content-detail">
                <view class="detail-title">
                  <view style="display: flex;flex-direction: row;">
                    <view class="detail-name font-28">{{ item.room_name }}
                      ({{ item.area_name }}/{{ item.type_name }})
                    </view>
                  </view>
                  <view style="display: flex;flex-direction: row;">
                    <view class="detail-target">消费时长：{{ item.consumption_time }}</view>
                    <!-- <uni-icons type="right" size="12" :color="iconColor"></uni-icons> -->
                  </view>
                </view>
                <view class="line-split"></view>
                <view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;">
                  <view class="detail-item">
                    <view class="label">消费：</view>
                    <view class="value">{{ item.total_money }}</view>
                  </view>
                  <view class="detail-item">
                    <view class="label">业绩：</view>
                    <view class="value">{{ item.performance_money }}</view>
                  </view>
                  <view class="detail-item align-end">
                    <view class="label">非业绩：</view>
                    <view class="value">{{ item.no_performance_money }}</view>
                  </view>
                </view>
                <view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;">
                  <view class="detail-item">
                    <view class="label">实收：</view>
                    <view class="value">{{ item.receipt_money }}</view>
                  </view>
                  <view class="detail-item">
                    <view class="label">来源：</view>
                    <view class="value">{{ item.from }}</view>
                  </view>
                  <view class="detail-item align-end">
                    <view class="label">取酒：</view>
                    <view class="value">{{ item.take_wine_flag }}</view>
                  </view>
                </view>
                <view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;">
                  <view class="detail-item">
                    <view class="label">主营：</view>
                    <view class="value">{{ item.main_money }}</view>
                  </view>
                  <view class="detail-item">
                    <view class="label">签送：</view>
                    <view class="value">{{ item.send_money }}</view>
                  </view>
                  <view class="detail-item align-end">
                    <view class="label">低消：</view>
                    <view class="value">{{ item.mix_money }}</view>
                  </view>
                </view>
                <view class="detail-body"
                      style="padding: 0 10rpx;height: auto;margin-top: 20rpx;margin-bottom: 20rpx;">
                  <view class="detail-item">
                    <view class="label" v-for="(pay,payIndex) in payList" :key="payIndex">
                      <text v-if="item[pay.field] && item[pay.field]>0">
                        {{ pay.name }}:{{ item[pay.field] }} &nbsp;
                      </text>
                    </view>
                  </view>
                </view>
              </view>
            </view>

          </view>

          <view style="padding: 0 30rpx;" v-if="queryTypeName === '充值明细' && detailList.length>0">
            <view style="background-color: var(--area-color);border-radius: 16rpx;"
                  v-for="(item,index) in detailList" :key="index">
              <view class="performance-detail-content-detail">
                <view class="detail-title">
                  <view style="display: flex;flex-direction: row;">
                    <view class="detail-name font-28">{{ item.charge_no }}</view>
                  </view>
                  <view style="display: flex;flex-direction: row;">
                    <view class="detail-target">{{ item.charge_time }}</view>
                  </view>
                </view>
                <view class="line-split"></view>
                <view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;">
                  <view class="detail-item">
                    <view class="label">充值：</view>
                    <view class="value">{{ item.charge_money }}</view>
                  </view>
                  <view class="detail-item">
                    <view class="label">赠送：</view>
                    <view class="value">{{ item.gift_money }}</view>
                  </view>
                  <view class="detail-item align-end">
                    <view class="label">会员：</view>
                    <view class="value">{{ item.member_name }}</view>
                  </view>
                </view>
                <view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;">
                  <view class="detail-item">
                    <view class="label">类型：</view>
                    <view class="value">{{ item.member_type_name }}</view>
                  </view>
                  <view class="detail-item">
                    <view class="label">卡号：</view>
                    <view class="value">{{ item.member_card }}</view>
                  </view>
                  <view class="detail-item align-end">
                    <view class="label">推荐人：</view>
                    <view class="value">{{ item.charge_recommender }}</view>
                  </view>
                </view>
                <view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;">
                  <view class="detail-item">
                    <view class="label">主卡：</view>
                    <view class="value">{{ item.member_balance_after }}</view>
                  </view>
                  <view class="detail-item">
                    <view class="label">副卡：</view>
                    <view class="value">{{ item.member_sub_balance_after }}</view>
                  </view>
                  <view class="detail-item align-end">
                    <view class="label">积分：</view>
                    <view class="value">{{ item.member_integral_balance }}</view>
                  </view>
                </view>
                <view class="detail-body"
                      style="padding: 0 10rpx;height: auto;margin-top: 20rpx;margin-bottom: 20rpx;">
                  <view class="detail-item">
                    <view class="label" v-for="(pay,payIndex) in payList" :key="payIndex">
                      <text v-if="item[pay.field] && item[pay.field]>0">
                        {{ pay.name }}:{{ item[pay.field] }} &nbsp;
                      </text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>


          <view v-if="detailList.length<=0"
                style="display: flex;flex-direction: row;justify-content: center;margin-top: 60rpx;">
            未查询到详细数据~
          </view>
          <view class="load-bottom">
            <view v-if="loadingFlagDetail == 1" class="load_in"
                  :class="loadingFlagDetail == 1 ? 'load_in_ani' : ''">
              <uni-icons type="spinner-cycle" size="30" color="#ff6f3f"></uni-icons>
            </view>
            <view v-show="loadingFlagDetail == 2" class="load_over">数据已全部加载~</view>
          </view>
        </scroll-view>
      </uni-popup>
    </view>

  </view>
  <custom-loading-vue ref="loadings"></custom-loading-vue>
</template>

<script setup>
import customRange from '@/components/customRange.vue'
import customLoadingVue from '@/components/customLoading.vue'
import {
  onLoad
} from '@dcloudio/uni-app'
import {
  ref,
  watch,
  getCurrentInstance
} from 'vue'

const handleBetweenTime = (timeRange) => {
  betweenTime.value = timeRange
}
const instance = getCurrentInstance()
const commonJs = instance?.proxy?.$commonJs
const shopIndex = ref(commonJs.getChooseShopIndex())
const shopList = ref(commonJs.getShopList())
const loadings = ref(null)
const betweenTime = ref([])
const iconColor = ref('var(--grey-text)')
const bgColor = ref('var(--bg-color)')
const salesman_id = ref(0)
const performance_person = ref({
  salesman_id: 0,
  salesman_name: '',
  depart_id: 0,
  depart_name: '',
  staff_salary: 0,
  performance_objectives: 0,
  fact_performance: 0,
  no_performance: 0,
  commission_money: 0,
  all_room_count: 0,
  all_effective_count: 0,
  all_reach_count: 0,
  all_money_count: 0,
  charge_money: 0,
  all_effective_performance_money: 0,
  all_effective_no_performance_money: 0,
  all_no_effective_count: 0,
  all_no_reach_count: 0,
  total_money: 0,
  total_fact_money: 0,
  all_effective_fact_money: 0,
  room_avg_money: 0,
  rate_money: 0,
  step_fact_money: 0,
  step_room_money: 0,
  step_depart_fact_money: 0,
  step_all_money: 0,
  wages_payable_money: 0,
  staff_id: 0,
  objectives_rate: 0,
  performance_top: 0
})
const perfomance_person_day_list = ref([])
const triggered = ref(false)
const scrollY = ref(0)
const sort = ref({
  name: '日期降序',
  sort: 'desc',
  icon: 'arrow-down'
})
const pagesData = ref({
  page: 1,
  limit: 10,
  total: 0
})
const loadingFlag = ref(0)
const personPerformanceShowList = ref({})
const popupPerformanceDetail = ref(null)
const sendTime = ref([])
const chooseIndex = ref(0)

onLoad((e) => {
  // 如果存在传参调用
  if (e.hasOwnProperty('staff')) {
    const staff = JSON.parse(e.staff)
    salesman_id.value = staff.salesman_id
    performance_person.value.staff_id = staff.salesman_id
    performance_person.value.salesman_id = staff.salesman_id
    performance_person.value.salesman_name = staff.salesman_name
    performance_person.value.depart_name = staff.depart_name
  }
  // 如果存在时间传参
  if (e.hasOwnProperty('betweenTime')) {
    sendTime.value = JSON.parse(e.betweenTime)
  }

  if (e.hasOwnProperty('index')) {
    chooseIndex.value = e.index
  }
  getPersonPerformanceShowSet()
  getPayList()
})

/**
 * 日期监听
 */
watch(betweenTime, (newValue, oldValue) => {
  if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
    getPerformancePerson()
    // 判断日期相差天数 是否请求每日业绩
    let day = getDaysDifference(betweenTime.value[0], betweenTime.value[1])
    pagesData.value.page = 1
    perfomance_person_day_list.value = []
    loadingFlag.value = 0
    if (day > 1) {
      getPerformancePersonByDay()
    }
  }
}, {
  deep: true
})

const getPersonPerformanceShowSet = () => {
  const params = {}
  commonJs.queryCache('/finance/getPersonPerformanceShowSet', params, {
    before() {

    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        personPerformanceShowList.value = data
      } catch (error) {
        commonJs.logger.debug(error, 'error')
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    },
    complete() {

    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
}

const themeChange = (theme) => {
  // #ifdef APP-PLUS
  let color, ac, c2int, win;
  color = plus.android.newObject("android.graphics.Color")
  ac = plus.android.runtimeMainActivity()
  if (theme == 'light') {
    c2int = plus.android.invoke(color, "parseColor", "#F5F5F5")
  } else {
    c2int = plus.android.invoke(color, "parseColor", "#181818")
  }
  win = plus.android.invoke(ac, "getWindow");
  plus.android.invoke(win, "setNavigationBarColor", c2int)
  // #endif
}

/**
 * 获取个人销售业绩
 */
const getPerformancePerson = async () => {
  const params = {
    begin_date: betweenTime.value[0] + ' 12:00:00',
    end_date: betweenTime.value[1] + ' 12:00:00',
    depart_id: 0,
    salesman_id: salesman_id.value || 0,
    limit: 1,
    page: 10
  }
  commonJs.queryCache('/app/admin/salesKPIById', params, {
    before() {

    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        if (data.hasOwnProperty('list')) {
          if (data.list.length > 0) {
            performance_person.value = data.list[0]
          } else {
            performance_person.value = {
              salesman_id: 0,
              salesman_name: '',
              depart_id: 0,
              depart_name: '',
              staff_salary: 0,
              performance_objectives: 0,
              fact_performance: 0,
              no_performance: 0,
              commission_money: 0,
              all_room_count: 0,
              all_effective_count: 0,
              all_reach_count: 0,
              all_money_count: 0,
              charge_money: 0,
              all_effective_performance_money: 0,
              all_effective_no_performance_money: 0,
              all_no_effective_count: 0,
              all_no_reach_count: 0,
              total_money: 0,
              total_fact_money: 0,
              all_effective_fact_money: 0,
              room_avg_money: 0,
              rate_money: 0,
              step_fact_money: 0,
              step_room_money: 0,
              step_depart_fact_money: 0,
              step_all_money: 0,
              wages_payable_money: 0,
              staff_id: 0,
              objectives_rate: 0,
              performance_top: 0
            }
          }
        }
      } catch (error) {
        commonJs.logger.debug(error, 'error')
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    },
    complete() {

    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
}

/**
 * 获取个人销售业绩按天统计
 */
const getPerformancePersonByDay = () => {
  const params = {
    begin_date: betweenTime.value[0] + ' 12:00:00',
    end_date: betweenTime.value[1] + ' 12:00:00',
    salesman_id: salesman_id.value || 0,
    limit: pagesData.value.limit,
    page: pagesData.value.page,
    sort: sort.value.sort
  }
  commonJs.queryCache('/app/admin/salesKPIDayById', params, {
    before() {
      loadings.value.show('加载中...')
    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        if (data.hasOwnProperty('list') && data.list.length > 0 && data.hasOwnProperty('count')) {
          pagesData.value.total = data.count
          perfomance_person_day_list.value = [...perfomance_person_day_list.value, ...data.list];
        }
      } catch (error) {
        commonJs.logger.debug(error, 'error')
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    },
    complete() {
      loadings.value.hide()
      setTimeout(() => {
        loadingFlag.value = 0
      }, 250)
    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
}

/**
 * 切换排序
 */
const changeSearch = () => {
  sort.value = sort.value.sort === 'desc' ? {
    name: '日期升序',
    sort: 'asc',
    icon: 'arrow-up'
  } : {
    name: '日期降序',
    sort: 'desc',
    icon: 'arrow-down'
  },
      resetPages()
  getPerformancePersonByDay()
}

/**
 * 格式化处理
 * @param money
 * @returns {string|*}
 */
const formatNumber = (money) => {
  // 判断是否为整数（即小数部分是否为 0）
  if (money % 1 === 0) {
    return Number(money).toString()
  } else {
    return Number(money).toFixed(2)
  }
}


const refresher = (e) => {
  if (!triggered.value) {
    triggered.value = true
    resetPages()
    getPerformancePersonByDay()
    getPerformancePerson()
    setTimeout(() => {
      triggered.value = false
    }, 500)
  }
}

const resetPages = () => {
  pagesData.value.page = 1
  loadingFlag.value = 0
  perfomance_person_day_list.value = []
}

const finishPullUp = (e) => {
  if (loadingFlag.value == 1 || loadingFlag.value == 2) {
    return
  }
  let pages = Math.ceil(pagesData.value.total / pagesData.value.limit)
  if (pagesData.value.page >= pages) {
    loadingFlag.value = 2
    return
  }
  if (loadingFlag.value == 0) {
    loadingFlag.value = 1
    pagesData.value.page++
    getPerformancePersonByDay()

  }
}

const getDaysDifference = (date1, date2) => {
  const d1 = new Date(date1)
  const d2 = new Date(date2)
  const timeDiff = d2.getTime() - d1.getTime()
  const dayDiff = timeDiff / (1000 * 3600 * 24)
  return Math.abs(dayDiff)
}

const performanceRank = (top) => {
  uni.showToast({
    title: '当前排名：第' + top + '名！',
    icon: 'none',
    duration: 1500
  })
}

const performanceOver = (rate) => {
  uni.showToast({
    title: '当前业绩完成率：' + rate + '%',
    icon: 'none',
    duration: 1500
  })
}

const avgMoney = (money) => {
  uni.showToast({
    title: '订桌均消为：' + money + '/桌',
    icon: 'none',
    duration: 1500
  })
}

const pagesDetail = ref({
  page: 1,
  limit: 8,
  total: 0
})
const detailList = ref([])
const loadingFlagDetail = ref(0)
const queryType = ref('')
const queryTypeName = ref('')

const showDetailPerformance = async (type) => {
  pagesDetail.value.page = 1
  loadingFlagDetail.value = 0
  detailList.value = []
  await getDetailPerformance(type)
  popupPerformanceDetail.value.open()
}

const cancelDetail = () => {
  popupPerformanceDetail.value.close()
}


/**
 * 获取业绩明细字段
 */
const getDetailPerformance = async (type) => {
  queryType.value = type
  if (type == 'fact_performance' || type == 'total_money' || type == 'no_performance' || type ==
      'commission_money' || type == 'total_fact_money') {
    queryTypeName.value = '业绩明细'
  }
  if (type == 'all_room_count' || type == 'all_effective_count' || type == 'all_effective_count' || type ==
      'all_no_effective_count' || type == 'all_effective_performance_money' || type ==
      'all_effective_no_performance_money' || type == 'all_reach_count' || type == 'all_no_reach_count') {
    queryTypeName.value = '订桌明细'
  }
  if (type == 'charge_money') {
    queryTypeName.value = '充值明细'
  }
  const params = {
    begin_date: betweenTime.value[0] + ' 12:00:00',
    end_date: betweenTime.value[1] + ' 12:00:00',
    salesman_id: salesman_id.value || 0,
    limit: pagesDetail.value.limit,
    page: pagesDetail.value.page,
    query_type: type
  }
  commonJs.queryCache('/finance/getSalesItemPerson', params, {
    before() {

    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        if (data.hasOwnProperty('list') && data.hasOwnProperty('count')) {
          detailList.value = [...detailList.value, ...data.list]
          pagesDetail.value.total = data.count || 0
        }
      } catch (error) {
        commonJs.logger.debug(error, 'error')
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    },
    complete() {
      setTimeout(() => {
        loadingFlagDetail.value = 0
      }, 250)
    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
}

const finishPullUpDetail = async (e) => {
  if (loadingFlagDetail.value == 1 || loadingFlagDetail.value == 2) {
    return
  }
  let pages = Math.ceil(pagesDetail.value.total / pagesDetail.value.limit)
  if (pagesDetail.value.page >= pages) {
    loadingFlagDetail.value = 2
    return
  }
  if (loadingFlagDetail.value == 0) {
    loadingFlagDetail.value = 1
    pagesDetail.value.page++
    getDetailPerformance(queryType.value)

  }
}

const showGoodsDetail = (item, index) => {
  detailList.value.map(detail => {
    if (detail.room_book_id == item.room_book_id) {
      detail.show = !detail.show
    }
    return detail
  })
}


const payList = ref([])

/**
 * 获取支付方式明细
 */
const getPayList = () => {
  const params = {}
  commonJs.queryCache('/finance/getPayList', params, {
    before() {

    },
    success(res) {
      try {
        const {
          code,
          data,
          msg,
          server_ip
        } = res
        if (data.length > 0) {
          payList.value = data.map(item => {
            item.field = 'money_' + item.payment_id
            return item
          })
        }
      } catch (error) {
        commonJs.logger.debug(error, 'error')
      }
    },
    fail(err) {
      commonJs.logger.debug(err, 'error')
    },
    complete() {

    }
  }, {"X-Merchant-ID": shopList.value[shopIndex.value].shop_id})
}
</script>
<style scoped>
.scroll {
  height: calc(100vh - 222rpx - var(--status-bar-height));
  box-sizing: border-box;
  display: flex;
  position: absolute;
  top: calc(var(--status-bar-height) + 222rpx);
}

.detail-title-performance {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  position: fixed;
  top: 0;
  z-index: 102;
  background-color: var(--bg-center-color);
  box-sizing: border-box;
}

.depart-title-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 40rpx;
  margin-top: 16rpx;
  font-size: 24rpx;
  color: var(--grey-text);
}

.performance-detail-content-detail {
  border-radius: 10rpx;
  padding: 0 10rpx;
  display: flex;
  flex-direction: column;
  font-size: 24rpx;
  color: var(--white-text);
  margin-top: 20rpx;
}

.detail-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 68rpx;
  align-items: center;
  line-height: 68rpx;
}

.detail-body {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 70rpx;
}

.detail-item {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.detail-target {
  font-size: 24rpx;
  color: var(--grey-text);
}

.sale_name {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  font-weight: 600;
  color: var(--white-text);
}

.align-end {
  justify-content: flex-end;
}

.label {
  font-size: 24rpx;
  color: var(--grey-text);
}

.value {
  font-size: 24rpx;
  color: var(--white-text);
  font-weight: 600;
}


.sale-fact-money {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100rpx;
  line-height: 100rpx;
}

.field-name {
  color: var(--grey-text);
  font-size: 28rpx;
  color: var(--grey-text);
}

.fact-money {
  color: #ff6f3f;
  font-size: 28rpx;
  font-weight: 600;
}

.sale-content {
  display: flex;
  flex-direction: column;
  padding: 0 30rpx;
  justify-content: center;
}

.sale-content-item {
  flex: 1;
  background-color: var(--bg-center-color);
  height: 120rpx;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-right: 30rpx;
}

.sale-content-item:last-child {
  margin-right: 0;
}

.content-field-name {
  color: var(--grey-text);
  font-size: 24rpx;
  margin-top: 10rpx;
}

.content-fact-money {
  color: var(--white-text);
  font-size: 32rpx;
  font-weight: 600;
}

.depart-content {
  padding: 0 30rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 96rpx;
  align-items: center;
}

.depart-content-title {
  height: 66rpx;
  line-height: 66rpx;
  color: var(--white-text);
  font-size: 28rpx;
  font-weight: 600;
}

.depart-content-field {
  display: flex;
  flex-direction: row;
  height: 66rpx;
  line-height: 66rpx;
}

.depart-content-rule {
  font-size: 24rpx;
  color: var(--grey-text);
}

.depart-title-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 40rpx;
  font-size: 26rpx;
  color: var(--grey-text);
}

.depart-title-content-name {
  width: 40%;
  display: flex;
  flex-direction: row;
  justify-content: start;
}

.depart-title-content-desk {
  width: 20%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.depart-title-content-money {
  width: 40%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.performance-detail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 30rpx;

}

.performance-detail-content {
  height: 80rpx;
  background-color: var(--bg-center-color);
  border-radius: 10rpx;
  padding: 0 10rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 26rpx;
  color: var(--white-text);
  margin-top: 20rpx;
}

.performance-detail-content-name {
  width: 40%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.performance-detail-content-desk {
  width: 20%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.performance-detail-content-money {
  width: 40%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  text-align: right;
}
</style>